<template>
    <div>
        <div class="banner">
            <img src="@/assets/images/index/banner.jpg" alt="" srcset="">
        </div>
        <div class="main">
            <!-- 公司简介 -->
            <div class="company-profile">
                <div class="container">
                    <div class="company-profile__avater">
                        <img src="@/assets/images/summary/1.png" alt="">
                    </div>
                    <div class="company-profile-intro">
                        <div class="company-profile-intro__logo">
                            <img src="@/assets/images/header/logo.png" alt="" srcset="">
                        </div>
                        <div class="company-profile-intro__title">
                            公司介绍
                        </div>
                        <div class="company-profile-intro-section">
                            <p>
                                福建迅科朗信物联网科技有限公司：公司致力于物联网信息技术的研发、应用及咨询服务、数字信息化集成项目开发、人力资源网络平台开发与应用、软件销售、计算机信息服务等项目, 并与中国物联网开放实验室战略合作拥有丰富的技术端口，引领前沿技术。                        
                            </p>
                            <p>
                                迅科时代软件：通过多年为客户提供开发服务，总结和积累了丰富的互联网项目开发运维经验，在项目开发思维、项目诊断、项目部署、项目运维、项目用户体验方面有独特的优势。
                            </p>
                            <p>
                               福建省迅科教育科技有限公司是福建省职业化人才教育领导者。公司拥有300多家IT名企合作单位。依托强大的企业资源，迅科教育准确把握IT企业人才需求特点和成长规律，立足高校，面向企业，创新出一套业内领先的职业化人才培养模式。公司以项目为导向，注重学员项目解决能力的培养。同时提供大量外包项目，顶岗实习机会，并与数十家IT名企签署人才联合培养战略协议，为企业定向输送优秀IT人才。
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 资源优势 -->
            <div class="resource-advantage">
                <div class="resource-advantage-title">
                    <h2 class="resource-advantage-title__name">迅科-资源优势</h2>
                    <p class="resource-advantage-title__desc">全省300多家名企合作资源，提供学员企业实践学习、顶岗实习。</p>
                </div>

                <div class="resource-advantage-section">
                    <div class="section-row ra-section" 
                    v-for="(item, index) in resources"
                    :key="index">
                        <div class="container">
                            <div class="ra-section-thumb">
                                <img :src="item.thumb" alt="" srcset="">
                            </div>
                            <div class="ra-section-text">
                                <h3 class="ra-section-text__name">
                                    {{item.text.name}}
                                </h3>
                                <div class="ra-section-text__desc">
                                    {{item.text.desc}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</template>

<script>
export default {
    data() {
        return {
            resources: [
                {
                    thumb: require('@/assets/images/summary/2.png'),
                    text: {
                        name: "丰富的名企 合作资源",
                        desc: `全省拥有多家名企合作资源，提供学员企业实践学习、顶岗实习；
与各大IT企业签署人才联合培养协议，定向培养，高薪就业；
全年数十场迅科学员企业专场招聘会，为学员提供高薪就业快车道；
与数十家IT名企签约共建人才实习实训基地，保证学员就业质量。`
                    }
                }, {
                    thumb: require('@/assets/images/summary/3.png'),
                    text: {
                        name: "一流的 课程体系",
                        desc: `迅科依托丰富的名企合作资源，调研福建省各大IT名企人才需求标准，结合院校相关专业课程体系，研发出一将领先业界的课程体系。以企业项目驱动课程教学，注重IT人才项目解决能力培养，提倡项目导向教学模式，让学员做到融会贯通，举一反三;本着培养IT精英人才的教育理念，迅科不断引领职业化精英人才培养的新高度。`
                    }
                }, {
                    thumb: require('@/assets/images/summary/4.png'),
                    text: {
                        name: "顶尖的 师资团队",
                        desc: `迅科所有讲师均重点大学本科以上学历，有大型企业相关领域7年以上从业经验，项目能力突出，具备带队开发能力，在大型企业负责重要的技术岗位。迅科特别关注讲师的表达能力和技巧擅于比拟，把抽象的概念用通俗的术语生动形象的表达出来，构建良好的课堂氛围。。`
                    }
                }, {
                    thumb: require('@/assets/images/summary/5.png'),
                    text: {
                        name: "出众的职业发展 服务体系",
                        desc: `迅科注重学员多维度能力培养，从专业技能、职业技能多方面培养。融入就业指导、职业素养、职场发展综合建议，并全省首创定制式职业生涯跟踪服务，为学员量身打造一年期、三年期、五年期职业发展综合服务，让学员一次学习，终身受益。`
                    }
                }
            ]
        }
    }
}
</script>

<style lang="less" scoped>
img{
max-width: 100%;
}
.main{
    margin-bottom: 70px;
}
/* 公司简介 */
.company-profile{
    overflow: hidden;
    margin-bottom: 125px;
    &__avater{
        width: 395px;
        height: 635px;
        // float: left;
    }
    &-intro{
        flex: 1;
        margin-left: 60px;
        &__logo{
            margin: 55px 0 35px;
        }
        &__title{
            margin-bottom: 55px;
            font-size: 32px;
        }
        &-section{
            line-height: 30px;
            position: relative;
            padding-bottom: 30px;
            p{
                margin: 0 0 15px 0;
                text-indent: 2em;
                color: #666;
                font-size: 20px;
            }
            p:first-child{
                margin-top: 135px;
            }
            &::after{
                content: '';
                display: block;
                width: 100%;
                height: 100%;
                background: #f7f7f7;
                position: absolute;
                top: -80px;
                left: -300px;
                z-index: -1;
                box-sizing: content-box;

                padding-top: 80px;
                padding-left: 300px;
                padding-bottom: 70px;
                padding-right: 500%;

            }
        }
    }
    .container{
        display: flex;
    }
}
.resource-advantage{
    font-family:MicrosoftYaHei;
    &-title{
        text-align: center;
        margin-bottom: 120px;
        &__name {
            font-size: 32px;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            line-height: 32px;
            position: relative;
            padding-bottom: 15px;
            &::after{
                content: '';
                display: block;
                position: absolute;
                width: 600px;
                height: 2px;
                background: linear-gradient(90deg, rgba(157, 157, 157, 0) 0%, rgba(157, 157, 157, 0.99) 50%, rgba(157, 157, 157, -0.1) 100%);
                opacity: 0.68;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
            }
        }
        &__desc{
            font-size:16px;
            font-family:HYg2gj;
            font-weight:400;
            color:rgba(153,153,153,1);
            line-height:61px;
        }
    }
}
.ra-section{
    background: #F0F6FE;
    .container{
        display: flex;
    }
    &-thumb{
        font-size: 0;
        img{
            max-width: fit-content;
            // height: 100%;
        }
    }
    &-text{
        margin: 0 16px 0 110px;
        &__name{
            margin-top: 140px;
            font-size:36px;
            font-weight:bold;
            color:rgba(102,102,102,1);
            margin-bottom: 80px;
            line-height: 1;
            position: relative;
            &::after{
                content: '';
                display: block;
                position: absolute;
                bottom: -20px;
                left: 0;
                width:66px;
                height:4px;
                background:rgba(0,144,255,1);
            }
        }
        &__desc{
            font-size:20px;
            font-weight:400;
            color:rgba(153,153,153,1);
            line-height:42px;
        }
    }
}
.ra-section:nth-child(2n){
    margin: 20px 0;
    background: #fff;
    .container{
        flex-direction: row-reverse;
    }
    .ra-section-text{
        margin: 0 35px 0 30px;
    }
}

@media screen and (max-width: 480px) {
    .main{
        padding: 20px 0;
    }
    .company-profile{
        padding: 0 20px 0 20px;
        margin: 0;
        &__avater, &-intro__logo{
            display: none;
        }
        &-intro{
            margin: 0;
            &__title{
                margin-bottom: 20px;
            }
            &-section::after{
                display: none;
            }
            &-section{
                p{
                    font-size: 16px;
                }
                p:first-child{
                    margin-top: 0;
                }
            }
        }
    }
    .resource-advantage{
        &-title{
            margin-bottom: 20px;
            &__name{
                &::after{
                    width: 50%;
                }
            }
            &__desc{
                margin-top: 15px;
                line-height: 1.5;
                font-size: 16px;
                padding: 0 20px;
            }
        }

    } 
    .ra-section{
        margin: 0 !important;
        .container{
            flex-wrap: wrap;
        }
        &-thumb{
            width: 100%;
            height: 200px;
            overflow: hidden;
            img{
                max-width: none;
                width: 100%;
            }
        }
        &-text{
            margin: 15px !important;
            &__name{
                font-size: 20px;
                margin-top: 20px;
                margin-bottom: 30px;
                &::after{
                    width: 40px;
                }
            }
            &__desc{
                font-size: 16px;
                line-height: 1.5;
            }
        }
    }
    .ra-section:nth-child(2n) {
        .ra-section-text__name::after{
            background: #00c48d;
        }
    }
}
</style>
